<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="">
    <view class="rounded-b-4 relative">
      <wd-img
        class="w-full h-90%! absolute! z--1"
        src="/static/images/ic_app_background.png"
        mode="scaleToFill"
      />
      <view class="flex flex-col gap-4 px-4 py-2">
        <!-- 右上角图标 -->
        <view class="flex justify-end gap-4">
          <wd-img :width="28" :height="28" src="/static/images/ic_setting.png" />
          <wd-img :width="28" :height="28" src="/static/images/ic_scan.png" />
        </view>
        <!-- 个人信息 -->
        <view class="flex gap-2">
          <wd-img :width="64" :height="64" round src="/static/images/ic_person.png" />
          <view class="flex flex-col justify-center">
            <text class="text-white text-lg">166****1234</text>
            <div class="flex gap-1">
              <wd-tag round color="#fff" class="!p-0 !px-2 !bg-black !bg-op-30 !border-0">
                V0会员
              </wd-tag>
              <wd-tag round color="#fff" class="!p-0 !px-2 !bg-black !bg-op-30 !border-0">
                收货地址
              </wd-tag>
            </div>
          </view>
        </view>
        <!-- 积分等信息 -->
        <view class="flex justify-between items-center text-white px-5">
          <view class="text-center">
            <view>0</view>
            <view>积分</view>
          </view>
          <view class="fix-text"></view>
          <view class="text-center">
            <view>0</view>
            <view>优惠券</view>
          </view>
          <view class="fix-text"></view>
          <view class="text-center">
            <view>0</view>
            <view>代金券</view>
          </view>
        </view>
        <!-- 我的订单 -->

        <view class="bg-white p-4 rounded-4">
          <view class="flex justify-between items-center">
            <text class="">我的订单</text>
            <navigator url="/pages/my-order/my-order">
              <text class="text-xs text-gray-6">全部订单&gt;</text>
            </navigator>
          </view>
          <view class="flex justify-between mt-4">
            <navigator url="/pages/my-order/my-order?tab=待支付">
              <wd-badge modelValue="">
                <view class="flex flex-col justify-center items-center gap-2">
                  <wd-img :width="32" :height="32" src="/static/images/ic_credit_card.png" />
                  <view class="text-xs">待付款</view>
                </view>
              </wd-badge>
            </navigator>
            <navigator url="/pages/my-order/my-order?tab=待发货">
              <wd-badge modelValue="">
                <view class="flex flex-col justify-center items-center gap-2">
                  <wd-img :width="32" :height="32" src="/static/images/ic_ship.png" />
                  <view class="text-xs">待发货</view>
                </view>
              </wd-badge>
            </navigator>
            <navigator url="/pages/my-order/my-order?tab=待收货">
              <wd-badge modelValue="12">
                <view class="flex flex-col justify-center items-center gap-2">
                  <wd-img :width="32" :height="32" src="/static/images/ic_flat.png" />
                  <view class="text-xs">待收货</view>
                </view>
              </wd-badge>
            </navigator>
            <navigator url="/pages/my-order/my-order?tab=待评价">
              <wd-badge modelValue="12">
                <view class="flex flex-col justify-center items-center gap-2">
                  <wd-img :width="32" :height="32" src="/static/images/ic_evaluation.png" />
                  <view class="text-xs">待评价</view>
                </view>
              </wd-badge>
            </navigator>

            <wd-badge modelValue="">
              <view class="flex flex-col justify-center items-center gap-2">
                <wd-img :width="32" :height="32" src="/static/images/ic_sale.png" />
                <view class="text-xs">退款/售后</view>
              </view>
            </wd-badge>
          </view>
        </view>
      </view>
    </view>
    <view class="mx-4 my-2 py-5 px-8 bg-white rounded-4">
      <view class="flex justify-between">
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_member.png" />
          <text class="text-sm">V0会员</text>
        </view>
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_score.png" />
          <text class="text-sm">积分商城</text>
        </view>
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_interact.png" />
          <text class="text-sm">互动有礼</text>
        </view>
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_card.png" />
          <text class="text-sm">红包卡券</text>
        </view>
      </view>
    </view>
    <view class="mx-4 my-2 py-5 px-8 bg-white rounded-4">
      <view class="flex justify-between">
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_official.png" />
          <text class="text-sm">官方客服</text>
        </view>
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_cash.png" />
          <text class="text-sm">现金红包</text>
        </view>
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_trade.png" />
          <text class="text-sm">以旧换新</text>
        </view>
        <view class="flex flex-col justify-center items-center">
          <wd-img :width="32" :height="32" src="/static/images/ic_my_evaluation.png" />
          <text class="text-sm">我的评价</text>
        </view>
      </view>
    </view>
    <!-- 商品卡片列表 -->
    <view class="grid grid-cols-[repeat(2,_minmax(240rpx,_1fr))] gap-4 m4">
      <goods-card v-for="good in goods" :key="good.id" :goods="good" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import goodsCard from '@/components/goods-card.vue'
const goods = ref([
  {
    id: 1,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    image: '/static/images/product001.png',
    tag: '赠送积分',
  },
  {
    id: 2,
    title: '【XXXXBook13】XX笔记本电脑 xxxxBook13',
    price: 5199,
    image: '/static/images/product002.png',
    tag: '新品',
  },
  {
    id: 3,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    image: '/static/images/product003.png',
    tag: '新品',
  },
  {
    id: 4,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 3899,
    image: '/static/images/product004.png',
    tag: '新品',
  },
  {
    id: 5,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 2799,
    image: '/static/images/product005.png',
    tag: '新品',
  },
  {
    id: 6,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 3588,
    image: '/static/images/product006.png',
    tag: '新品',
  },
])
</script>

<style lang="scss" scoped>
.fix-text {
  width: 2px;
  height: 18px;
  border-left: 1px solid #ffffff;
}
</style>
